<template>
  <div class="route-plan">
    <div class="drawer-panel" :style="[drawerPanelStyle]">
      <div v-loading="loading" element-loading-text="正在进行路径规划···" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0,0,0,0.8)">
        <div class="roam">
          <div class="roam-btns">
            <div class="panel-btns" @click="drawRoam()" v-if="!isEdit" :style="[routerPanelBtnStyle]">绘制规划线</div>
            <div class="panel-btns" @click="editAtr" v-if="!isEdit" :style="[isEditPointAtr ? editRouterPanelBtnStyle : routerPanelBtnStyle]">属性编辑</div>
            <div class="panel-btns" @click="EditRoam()" v-if="!isEdit" :style="[isEditPoint ? editRouterPanelBtnStyle : routerPanelBtnStyle]">位置编辑</div>
            <div class="panel-btns" @click="routePlan" v-if="!isEdit" :style="[routerPanelBtnStyle]">路径规划</div>
          </div>

          <div class="roam-form">
            <el-form ref="form" :model="form" label-width="100px" style="border-bottom: 1px solid #fff; margin: 5px">
              <el-form-item label="路线名称">
                <el-input size="mini" v-model="form.roadName" @change="nameChange" style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="视角模式">
                <el-select size="mini" v-model="form.sjms" @change="sjmsChange" style="width: 200px">
                  <el-option label="跟随模型" value="0">跟随模型</el-option>
                  <el-option label="第一人称视角" value="1">第一人称视角</el-option>
                  <el-option label="上帝视角" value="2">上帝视角</el-option>
                  <el-option label="无人机视角" value="3">无人机视角</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" label-width="0">
                <div class="router-flex">
                  <el-tooltip effect="dark" content="新增点" placement="top">
                    <!-- <i class="el-icon-add-location"></i> -->
                    <el-button circle type="primary" icon="el-icon-add-location" style="height: 28px" size="mini" @click="addPosition"></el-button>
                  </el-tooltip>
                  <el-table
                    ref="tTbale"
                    size="mini"
                    :data="positionData"
                    max-height="165"
                    :current-row-key="currentRow"
                    highlight-current-row
                    :header-row-style="{ height: '28px', lineHeight: '28px' }"
                  >
                    <el-table-column label="序号" width="70" prop="No">
                      <template slot-scope="scope">
                        <i @click="deletePosition(scope)" class="el-icon-delete table-icon"></i>
                        <span style="margin-left: 10px; color: #fff">{{ scope.row.No }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="经度" width="130">
                      <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.longitude" :title="scope.row.longitude" @change="positionChange(scope)"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="纬度" width="130">
                      <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.latitude" :title="scope.row.latitude" @change="positionChange(scope)"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="高度(m)">
                      <template slot="header" slot-scope="scope">
                        高度(m)
                        <i class="el-icon-edit router-cursor" @click="changeAllPointHeight(scope.row)"></i>
                      </template>
                      <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.height" :title="scope.row.height" @change="positionChange(scope)"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class="roam-btns">
            <div @click="startRome()" class="panel-btns" :style="[routerPanelBtnStyle]">开始漫游</div>
            <div @click="suspendRoam()" class="panel-btns" :style="[routerPanelBtnStyle]" v-if="roamStatue">暂停漫游</div>
            <div @click="continueRoam()" class="panel-btns" :style="[routerPanelBtnStyle]" v-else>继续漫游</div>
            <div @click="exitRoam()" class="panel-btns" :style="[routerPanelBtnStyle]">退出漫游</div>
            <div @click="saveRoute()" class="panel-btns" :style="[routerPanelBtnStyle]">保存漫游</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 漫游参数 -->
    <div class="other-setting-panel" id="otherSettingPanel" v-show="drawer" :style="[detailsPanelStyle]">
      <div v-if="form.sjms === '1' || form.sjms === '3'" class="otherSetingitem">
        <span> 俯仰角</span>
        <el-input size="mini" v-model="form.pitch" @input="pitchInput"></el-input>
      </div>
      <div v-if="form.sjms === '1'" class="otherSetingitem">
        <span> 飞行距离</span>
        <el-input size="mini" v-model="form.cameraDistance" @input="cameraDistInput"></el-input>
      </div>
      <div class="otherSetingitem">
        <span> 速率</span>
        <el-slider size="mini" v-model="form.dynamicSpeed" :min="0.5" :max="5" :step="0.5" @change="speedInput" show-stops></el-slider>
      </div>
      <div class="otherSetingitem">
        <span> 总长度</span>
        <span>{{ form.totalLen }}</span>
      </div>
      <!-- <div class="otherSetingitem">
          <span> 已漫游长度</span>
          <span>{{ form.distanceTraveled }}</span>
        </div> -->
      <div class="otherSetingitem">
        <span> 飞行时长</span>
        <span>{{ form.totalTime }}</span>
      </div>
      <div class="otherSetingitem">
        <span> 已漫游时间</span>
        <span>{{ form.time }}</span>
      </div>
      <div class="otherSetingitem">
        <span> 是否显示模型</span>
        <el-switch size="mini" v-model="form.showModel" @change="modelChange"></el-switch>
      </div>

      <div class="otherSetingitem">
        <span> 是否显示路线</span>
        <el-switch v-model="form.showLine" @change="lineChange"></el-switch>
      </div>

      <div class="otherSetingitem">
        <span> 漫游速度</span>
        <span>{{ form.sd }}</span>
      </div>
      <div class="otherSetingitem">
        <span> 经度</span>
        <span>{{ form.jd }}</span>
      </div>
      <div class="otherSetingitem">
        <span> 纬度</span>
        <span>{{ form.wd }}</span>
      </div>
      <div class="otherSetingitem">
        <span> 漫游高程</span>
        <span>{{ form.height }}</span>
      </div>
      <div class="otherSetingitem">
        <span> 地面高程</span>
        <span>{{ form.globeHeight }}</span>
      </div>

      <div class="otherSetingitem">
        <span> 进度</span>
        <el-progress :percentage="form.ratio" :format="format" :stroke-width="10"></el-progress>
      </div>
    </div>

    <!-- 节点属性 -->
    <div v-if="showMessage" class="message-box" :style="[nodePanelStyle]">
      节点属性
      <i class="el-icon-close router-cursor" style="float: right" @click="closeAttribute"></i>
      <div style="margin-bottom: 10px">
        <div class="otherSetingitem-1">
          <span> 节点编号</span>
          <span>{{ node.Number }}</span>
        </div>
        <div class="otherSetingitem-1">
          <span>飞行高度(m)</span>
          <!-- <el-input size="mini" v-model="node.flightHs" @change="changeflights"></el-input> -->
          <el-input-number size="mini" v-model="node.flightHs" @change="changeflights"></el-input-number>
        </div>
        <div class="otherSetingitem-1">
          <span>悬停时间(s)</span>
          <el-input size="mini" v-model="node.hoveringtime"></el-input>
        </div>

        <div class="otherSetingitem-1">
          <span>偏航角</span>
          <el-input-number :min="-180" :max="180" size="mini" v-model="node.angle" @change="changeAngle"></el-input-number>
        </div>
        <div class="otherSetingitem-1">
          <span>俯仰角</span>
          <el-input-number :min="-90" :max="90" size="mini" v-model="node.pitch" @change="changePitch"></el-input-number>
        </div>
        <div class="otherSetingitem-1">
          <span>飞行速度(m/s)</span>
          <el-input size="mini" v-model="node.speed"></el-input>
        </div>
        <div class="otherSetingitem-1">
          <span>相机视角<i class="el-icon-folder-add router-cursor" @click="addPosture" style="margin-left: 20px"></i></span>
          <div class="collapse">
            <div v-for="(posture, pid) in node.postureList" :key="pid">
              <el-collapse size="mini">
                <el-collapse-item>
                  <template slot="title">
                    <div class="collapse-title">
                      <span>视角{{ pid + 1 }}</span
                      ><i class="el-icon-delete" @click.stop="deleteView(pid)"></i>
                    </div>
                  </template>
                  <div class="collapse-text">
                    开始时间：
                    <el-input size="mini" style="width: 120px" v-model="posture.turnTime" @input="turnInput">
                      <template slot="append">秒</template>
                    </el-input>
                  </div>
                  <div class="collapse-text">
                    偏航角：
                    <div class="text-disabled">{{ posture.heading }}</div>
                  </div>
                  <div class="collapse-text">
                    俯仰角：
                    <div class="text-disabled">{{ posture.pitch }}</div>
                  </div>
                  <!-- <div class="collapse-text">
                        roll：
                        <div class="text-disabled">{{ posture.roll }}</div>
                      </div> -->
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
        <div style="float: right">
          <el-button size="mini" @click="closeAttribute">取消</el-button>
          <el-button type="success" size="mini" @click="savePointAttribute">保存</el-button>
        </div>
      </div>
    </div>

    <el-dialog title="调整高度" :visible.sync="showDialog">
      <div class="router-flex-1">
        <span>整体向上偏移：</span>
        <el-input-number size="small" v-model="offsetHeight" :step="1"></el-input-number>
      </div>
      <div style="display: flex; margin-top: 15px; justify-content: flex-end">
        <el-button type="primary" size="small" @click="confirmHeight">确定</el-button>
        <el-button plain size="small" @click="cancelHeight">取消</el-button>
      </div>
    </el-dialog>

    <node-info :nodeInfoStyle="nodeInfoStyle"></node-info>
  </div>
</template>
  
<script>
import dynamicObject from './dynamicObject'
import { getTime, getDistance } from './js/convert'
import { pathPlanning, saveRoute } from '@/network/pathfind'
import NodeInfo from './nodeInfo.vue'
import { EventBus } from '../../common/EventBus'

let routeData, dynamic, preUpdateListener, cameraListener
export default {
  name: 'ldRoutePlanning',
  props: {
    uavModel: {
      type: String,
      default: require('@/assets/img/无人机.glb')
    },
    pointMark: {
      type: String,
      default: require('@/assets/img/mark.png')
    },
    routerUrl: {
      type: String,
      default: 'http://39.105.98.235:8090'
    },
    drawerPanelStyle: {
      type: [Object, Array],
      default: () => ({
        background: '#073968a1'
      })
    },
    detailsPanelStyle: {
      type: [Object, Array],
      default: () => ({ background: ' #000000d3' })
    },
    nodePanelStyle: {
      type: [Object, Array],
      default: () => ({ background: '#000000d3' })
    },
    nodeInfoStyle: {
      type: [Object, Array],
      default: () => ({ background: '#000000d3' })
    },
    routerPanelBtnStyle: {
      type: [Object, Array],
      default: () => ({ background: '#008aff80' })
    },
    editRouterPanelBtnStyle: {
      type: [Object, Array],
      default: () => ({ background: '#11804380' })
    }
  },
  data() {
    return {
      offsetHeight: 0,
      drawer: false,
      showDialog: false,
      showMessage: false,
      title: '路径动画',
      roamStatue: true,
      form: {
        roadName: '',
        sjms: '3',
        cameraHeight: 0,
        cameraDistance: 10,
        pitch: -85,
        dynamicSpeed: 1,
        totalLen: null,
        distanceTraveled: null,
        totalTime: null,
        time: null,
        showModel: true,
        showLine: true,
        sd: 15,
        jd: null,
        wd: null,
        height: 0,
        globeHeight: null,
        ratio: 0
      },
      path: [],
      roamProcess: true,
      positionData: [],
      positions: [],
      isEdit: false,
      loading: false,
      node: {
        Number: 0,
        hoveringtime: 0,
        angle: 0,
        flightHs: 0,
        speed: 0,
        // risingSpeed: 0,
        // declineSpeed: 0,
        postureList: [],
        pitch: 0
      },
      currentRow: null, //table选中行
      isEditPointAtr: false, //是否编辑属性
      isEditPoint: false //位置编辑
    }
  },
  components: { NodeInfo },
  computed: {},
  watch: {
    showMessage: {
      handler(newVal) {
        if (!newVal) {
          this.closeAttribute()
        }
      }
    }
  },
  mounted() {
    this.communication()
  },
  methods: {
    communication() {
      EventBus.$on('changeIsEditPointAtr', (checked) => {
        this.isEditPointAtr = checked
      })
      EventBus.$on('changeIsEditPoint', (checked) => {
        this.isEditPoint = checked
      })
    },
    addPosture() {
      const viewer = window.Viewer
      const camera = viewer.camera
      let longitude, latitude, height
      for (let i of this.positionData) {
        if (i.No == parseInt(this.node.Number)) {
          longitude = parseFloat(i.longitude)
          latitude = parseFloat(i.latitude)
          height = parseFloat(i.height)
          const heading = this.normalizeHeading(Cesium.Math.toDegrees(camera.heading))
          const pitch = Cesium.Math.toDegrees(camera.pitch)
          this.node.postureList.push({
            turnTime: 0,
            heading: heading.toFixed(8),
            pitch: pitch.toFixed(8),
            roll: camera.roll
          })
        }
      }
    },
    //删除视角
    deleteView(id) {
      this.node.postureList = this.node.postureList.filter((_, index) => index != id)
    },
    //保证输入数值的正确性
    turnInput(value) {
      const numVal = Number(value)
      if (isNaN(numVal)) {
        this.$message.error('请输入有效数字')
      } else if (numVal > this.node.hoveringtime) {
        this.$message.warning('开始时间需小于总悬停时间')
      }
    },
    //修改飞行高度
    changeflights(value) {
      const viewer = window.Viewer

      let index = this.node.Number - 1
      this.positionData[index].height = value
      const cartesian = Cesium.Cartesian3.fromDegrees(parseFloat(this.node.lon), parseFloat(this.node.lat), parseFloat(value))
      this.adjustPointParam(index, cartesian)
      if (preUpdateListener) {
        preUpdateListener()
        preUpdateListener = viewer.scene.preUpdate.addEventListener(() => {
          viewer.camera.position = Cesium.Cartesian3.clone(cartesian)
        })
      }
    },
    //修改偏航角
    changeAngle(value) {
      const viewer = window.Viewer
      viewer.camera.setView({
        destination: viewer.camera._position,
        orientation: {
          heading: Cesium.Math.toRadians(value),
          pitch: viewer.camera.pitch,
          roll: viewer.camera.roll
        }
      })
    },
    changePitch(value) {
      const viewer = window.Viewer
      viewer.camera.setView({
        destination: viewer.camera._position,
        orientation: {
          heading: viewer.camera.heading,
          pitch: Cesium.Math.toRadians(value),
          roll: viewer.camera.roll
        }
      })
    },
    closeAttribute() {
      const viewer = window.Viewer
      this.showMessage = false
      this.drawer = true
      if (preUpdateListener) {
        preUpdateListener()
        preUpdateListener = null
      }
      if (cameraListener) {
        viewer.camera.changed.removeEventListener(cameraListener)
        cameraListener = null
      }
    },
    savePointAttribute() {
      dynamic && dynamic.changePointAttribute(this.node)
      for (let i of this.positionData) {
        if (i.No == parseInt(this.node.Number)) {
          i.properties = this.node
        }
      }
      routeData.positionData = this.positionData
      this.showMessage = false
      this.form.totalTime = this.hoverChange()
      routeData.totalTime = this.form.totalTime
    },

    confirmHeight() {
      if (this.offsetHeight == 0) {
        this.showDialog = false
      } else {
        let coordinate = []
        let newpositions = []
        for (let i of this.positionData) {
          i.height = parseFloat(i.height) + this.offsetHeight
          newpositions.push(Cesium.Cartesian3.fromDegrees(parseFloat(i.longitude), parseFloat(i.latitude), i.height))
          coordinate.push([parseFloat(i.longitude), parseFloat(i.latitude), i.height])
        }
        routeData.positionData = this.positionData

        dynamic && dynamic.setItemPosition(newpositions)
        this.form.totalLen = getDistance(dynamic.getDistance(newpositions))
        routeData.distance = dynamic.getDistance(newpositions)
        routeData && (routeData.geojson.geometry.coordinates = coordinate)
        dynamic && dynamic.setAllPointPosition(newpositions)
      }
      this.showDialog = false
    },
    cancelHeight() {
      this.showDialog = false
    },
    changeAllPointHeight() {
      if (this.positionData.length == 0) {
        this.$message.error('请先选择规划点！')
      } else {
        this.showDialog = true
      }
    },
    saveRoute() {
      if (routeData) {
        routeData.positionData = this.positionData
      }

      saveRoute(routeData, this.routerUrl).then((res) => {
        if (res && res.data && res.status == 200) {
          this.$message.success('添加成功!')
        } else {
          this.$message.error('添加失败！')
        }
      })
    },
    routePlan() {
      this.loading = true
      let route = {
        pathcoords: [],
        cost: true
      }
      for (let i of this.positionData) {
        route.pathcoords.push(parseFloat(i.longitude))
        route.pathcoords.push(parseFloat(i.latitude))
        route.pathcoords.push(parseFloat(i.height))
      }
      pathPlanning(route, this.routerUrl).then((res) => {
        if (res && res.data && res.status == 200) {
          this.loading = false
          if (res.data.error) {
            this.$message.error(res.data.error)
          } else {
            let posData = []
            this.positions = []
            let coordinate = res.data
            let j = 0
            for (let i = 0; i < coordinate.length; i++) {
              if (coordinate[i][3] === 0) {
                j += 1 //新增点数
                const data = {
                  No: i + 1,
                  longitude: coordinate[i][0],
                  latitude: coordinate[i][1],
                  height: coordinate[i][2].toFixed(2),
                  properties: {
                    Number: i + 1,
                    hoveringtime: 0,
                    angle: 0,
                    flightHs: 0,
                    speed: 0,
                    pitch: 0,
                    postureList: []
                  }
                }
                posData.push(data)
              } else {
                const data = {
                  No: i + 1,
                  longitude: coordinate[i][0],
                  latitude: coordinate[i][1],
                  height: coordinate[i][2],
                  properties: this.positionData[i - j].properties
                }
                posData.push(data)
              }

              var cartesian = Cesium.Cartesian3.fromDegrees(coordinate[i][0], coordinate[i][1], coordinate[i][2])
              this.positions.push(cartesian)
            }
            this.positionData.length = 0
            this.positionData.push(...posData)
            dynamic && dynamic.setItemPosition(this.positions)
            this.form.totalLen = getDistance(dynamic.getDistance(this.positions))
            routeData.distance = dynamic.getDistance(this.positions)
            routeData && (routeData.geojson.geometry.coordinates = coordinate)
            dynamic && dynamic.setPoint(this.positions, posData)
          }
        }
      })
    },
    EditRoam() {
      this.isEditPoint = !this.isEditPoint
      if (this.isEditPoint) {
        dynamic &&
          dynamic.EditPosition(this.getPoint, (entity) => {
            if (Cesium.defined(entity.id) && entity.id._properties.Number) {
              this.setlectRow(entity.id._properties.Number._value)
            } else {
              this.setlectRow()
            }
          })
      } else {
        dynamic && dynamic.exitPointEdit()
      }
    },
    editAtr() {
      let that = this
      const viewer = window.Viewer
      that.isEditPointAtr = !that.isEditPointAtr
      if (that.isEditPointAtr) {
        dynamic &&
          dynamic.EditAttribute(this.getPointAttribute, (entity) => {
            if (Cesium.defined(entity)) {
              if (preUpdateListener) {
                preUpdateListener()
                preUpdateListener = null
              }
              that.drawer = false
              that.showMessage = true

              const points = this.getcoords()
              that.voluation(entity, points)
              const center = Cesium.Cartesian3.fromDegrees(points.longitude, points.latitude, points.height)
              // const hpr = new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0), Cesium.Math.toRadians(-1), 0.01)
              // viewer.camera.lookAt(center, hpr)
              preUpdateListener = viewer.scene.preUpdate.addEventListener(() => {
                viewer.camera.position = Cesium.Cartesian3.clone(center)
              })
              cameraListener = () => {
                const heading = this.normalizeHeading(Cesium.Math.toDegrees(viewer.camera.heading))
                const pitch = Cesium.Math.toDegrees(viewer.camera.pitch)
                that.$set(this.node, 'angle', heading.toFixed(2))
                that.$set(this.node, 'pitch', pitch.toFixed(2))
              }
              viewer.camera.changed.addEventListener(cameraListener)
            }
          })
      } else {
        dynamic && dynamic.exitAttributeEdit()
      }
    },
    getPointAttribute(properties) {
      this.showMessage = true
      this.node = properties
    },
    getPoint(index, cartesian, text) {
      this.positions[index] = cartesian
      var cartographic = Cesium.Cartographic.fromCartesian(cartesian)
      var lon = Cesium.Math.toDegrees(cartographic.longitude)
      var lat = Cesium.Math.toDegrees(cartographic.latitude)

      this.positionData[index].No = text
      this.positionData[index].longitude = lon.toFixed(7)
      this.positionData[index].latitude = lat.toFixed(7)
      this.positionData[index].height = cartographic.height.toFixed(2)

      this.form.totalLen = getDistance(dynamic.getDistance(this.positions))
      routeData.distance = dynamic.getDistance(this.positions)

      this.form.totalTime = this.hoverChange()
      routeData.totalTime = this.form.totalTime

      let geoposition = []
      for (let i of this.positionData) {
        var point = [parseFloat(i.longitude), parseFloat(i.latitude), parseFloat(i.height)]
        geoposition.push(point)
      }
      routeData && (routeData.geojson.geometry.coordinates = geoposition)
    },
    positionChange(scope) {
      let index = scope.$index
      var cartesian = Cesium.Cartesian3.fromDegrees(parseFloat(scope.row.longitude), parseFloat(scope.row.latitude), parseFloat(scope.row.height))
      this.adjustPointParam(index, cartesian)
    },
    deletePosition(scope) {
      this.positionData.splice(scope.$index, 1)
      this.positions.splice(scope.$index, 1)
      dynamic && dynamic.setItemPosition(this.positions)
      let geoposition = []
      for (let i of this.positionData) {
        var point = [parseFloat(i.longitude), parseFloat(i.latitude), parseFloat(i.height)]
        geoposition.push(point)
      }
      routeData && (routeData.geojson.geometry.coordinates = geoposition)

      this.form.totalLen = getDistance(dynamic.getDistance(this.positions))
      routeData.distance = dynamic.getDistance(this.positions)

      dynamic && dynamic.deletePointItem(scope.$index)

      this.form.totalTime = this.hoverChange()
      routeData.totalTime = this.form.totalTime
    },
    addPosition() {
      dynamic && dynamic.AddPosition(this.getAddPoint)
    },

    getAddPoint(addPosition, No) {
      this.positions.splice(addPosition.index + 1, 0, addPosition.position)

      this.form.totalLen = getDistance(dynamic.getDistance(this.positions))
      routeData.distance = dynamic.getDistance(this.positions)
      var cartographic = Cesium.Cartographic.fromCartesian(addPosition.position)
      var lon = Cesium.Math.toDegrees(cartographic.longitude)
      var lat = Cesium.Math.toDegrees(cartographic.latitude)
      this.positionData.splice(addPosition.index + 1, 0, {
        No: No,
        longitude: lon.toFixed(7),
        latitude: lat.toFixed(7),
        height: cartographic.height.toFixed(2),
        properties: {
          Number: addPosition.index + 1,
          hoveringtime: 0,
          angle: 0,
          flightHs: 0,
          speed: 0,
          pitch: 0,
          // declineSpeed: 0,
          postureList: []
        }
      })
      for (let i = 0; i < this.positionData.length; i++) {
        const pData = this.positionData[i]
        pData.No = i + 1
        pData.properties.Number = (i + 1).toString()
      }
      let geoposition = []
      for (let i of this.positionData) {
        var point = [parseFloat(i.longitude), parseFloat(i.latitude), parseFloat(i.height)]
        geoposition.push(point)
      }
      routeData && (routeData.geojson.geometry.coordinates = geoposition)
    },
    startRome() {
      let url = this.uavModel
      routeData.positionData = this.positionData
      dynamic.Start(routeData, url, shuj)

      let that = this
      function shuj(data) {
        if (data.TotalTime) {
          that.form.time = getTime(parseInt(data.TotalTime))
        }
        if (data.distanceTraveled) {
          //已漫游长度
          that.form.distanceTraveled = getDistance(data.distanceTraveled)
        }
        if (data.time) {
          //已漫游时间
          that.form.time = getTime(parseInt(data.time))
        }
        if (data.longitude) {
          //经度
          that.form.jd = data.longitude.toFixed(7) + '°'
        }
        if (data.latitude) {
          //纬度
          that.form.wd = data.latitude.toFixed(7) + '°'
        }
        if (data.height) {
          //
          that.form.height = getDistance(data.height)
        }
        if (data.globeHeight) {
          //速度
          that.form.globeHeight = getDistance(data.globeHeight)
        }
        if (data.speed) {
          that.form.sd = parseInt(data.speed) + 'm/s'
        }
        if (data.ratio) {
          that.form.ratio = parseInt(data.ratio * 100)
        }
      }
    },
    drawRoam() {
      this.exitRoam()
      this.deleteItem()
      this.deletePoint()
      this.positionData = []
      this.positions = []
      const viewer = window.Viewer
      viewer.scene.camera._suspendTerrainAdjustment = false
      viewer.scene.globe.depthTestAgainstTerrain = true
      dynamic = new dynamicObject(window.Viewer, this.pointMark)
      dynamic.executeFlycesium((data) => {
        data.showPoint = false
        data.showLine = this.form.showLine
        data.showModel = this.form.showModel //模型
        data.mode = 3
        data.speed = this.form.sd //速度
        data.pitch = this.form.pitch //俯仰角
        data.range = this.form.cameraDistance //飞行距离
        data.height = this.form.cameraHeight
        data.url = this.uavModel
        routeData = data
        this.assignment()
        this.drawer = true
      }, this.getPosition)
    },
    getPosition(position, No, properties) {
      this.positions.push(position)
      var cartographic = Cesium.Cartographic.fromCartesian(position)
      var lon = Cesium.Math.toDegrees(cartographic.longitude)
      var lat = Cesium.Math.toDegrees(cartographic.latitude)

      this.positionData.push({
        No: No,
        longitude: lon.toFixed(7),
        latitude: lat.toFixed(7),
        height: cartographic.height.toFixed(2),
        properties: properties
      })
    },
    suspendRoam() {
      if (dynamic) {
        dynamic.isPause(true)
        this.roamStatue = false
      }
    },
    continueRoam() {
      if (dynamic) {
        dynamic.isPause(false)
        this.roamStatue = true
      }
    },
    exitRoam() {
      dynamic && dynamic.exit()
      EventBus.$emit('changeAttributePopup', false)
    },

    nameChange(name) {
      routeData && (routeData.name = name)
    },
    sjmsChange(val) {
      if (val === '0') {
        dynamic && dynamic.changeFlyMode(0)
        routeData && (routeData.mode = 0)
      } else if (val === '1') {
        dynamic && dynamic.changeFlyMode(1)
        routeData && (routeData.mode = 1)
      } else if (val === '2') {
        dynamic && dynamic.changeFlyMode(2)
        routeData && (routeData.mode = 2)
      } else if (val === '3') {
        dynamic && dynamic.changeFlyMode(3)
        routeData && (routeData.mode = 3)
      }
    },
    cameraHeigInput(value) {
      dynamic && dynamic.setdynamicHeight(parseFloat(value))
      routeData && (routeData.height = parseFloat(value))
    },
    cameraDistInput(value) {
      dynamic && dynamic.setFlyDistance(parseFloat(value))
      routeData && (routeData.range = parseFloat(value))
    },
    pitchInput(value) {
      dynamic && dynamic.setFlyPitch(parseFloat(value))
      routeData && (routeData.pitch = parseFloat(value))
      this.form.pitch = value
    },
    speedInput(value) {
      dynamic && dynamic.setMultiplier(value)
      routeData && (routeData.multiplier = value)
      this.form.sd = this.form.sd * value + 'm/s'
    },
    modelChange(checked) {
      dynamic && dynamic.showModel(checked)
      routeData && (routeData.showModel = checked)
    },
    lineChange(checked) {
      dynamic && dynamic.showLine(checked)
      routeData && (routeData.showLine = checked)
    },
    assignment() {
      if (routeData) {
        if (routeData.distance) {
          this.form.totalLen = getDistance(routeData.distance)
        }
        if (routeData.Totaltime) {
          this.form.totalTime = getTime(routeData.Totaltime)
        }
        if (routeData.range) {
          this.form.cameraDistance = routeData.range
        }
        if (routeData.height) {
          this.form.cameraHeight = routeData.height
        }
        if (routeData.pitch) {
          this.form.pitch = routeData.pitch
        }
        this.form.roadName = routeData.name
      }
    },
    format(percentage) {
      return `${percentage}%`
    },
    //节点属性面板赋值
    voluation(entity, points) {
      const info = entity.properties.getValue(Cesium.JulianDate.now())
      this.$set(this.node, 'flightHs', points.height)
      this.$set(this.node, 'speed', info.speed)
      // this.$set(this.node, 'angle', info.angle)
      this.$set(this.node, 'hoveringtime', info.hoveringtime)
      this.$set(this.node, 'postureList', info.postureList)

      this.node.lon = points.longitude
      this.node.lat = points.latitude
    },
    deleteItem() {
      dynamic && dynamic.removeItem()
    },

    deletePoint() {
      dynamic && dynamic.removePoint()
    },
    close() {
      this.exitRoam()
      this.deleteItem()
      this.deletePoint()
      this.closeAttribute()
    },
    //高亮entity对应行
    setlectRow(jzbh) {
      if (jzbh) {
        console.log(jzbh)
        for (let i = 0; i < this.positionData.length; i++) {
          const data = this.positionData[i]
          if (data.properties.Number === jzbh) {
            this.$refs.tTbale.setCurrentRow(data, true)
            this.scrollToRow(i)
          }
        }
      } else {
        this.$refs.tTbale.setCurrentRow()
      }
    },
    scrollToRow(index) {
      this.$nextTick(() => {
        const targetRow = this.$refs.tTbale.$el.querySelector(`.el-table__body tr:nth-child(${index + 1})`)
        if (targetRow) {
          const headerHeight = this.$refs.tTbale.$el.querySelector('.el-table__header').offsetHeight
          const bodyWraper = this.$refs.tTbale.$el.querySelector('.el-table__body-wrapper')
          bodyWraper.scrollTop = targetRow.offsetTop - headerHeight
        }
      })
    },
    getcoords() {
      let longitude, latitude, height
      for (let i of this.positionData) {
        if (i.No == parseInt(this.node.Number)) {
          longitude = parseFloat(i.longitude)
          latitude = parseFloat(i.latitude)
          height = parseFloat(i.height)
          console.log('1111111111', this.node.Number)

          this.setlectRow(this.node.Number)
        }
      }
      return { longitude, latitude, height }
    },
    //调整节点参数
    adjustPointParam(index, cartesian) {
      this.positions[index] = cartesian
      dynamic && dynamic.setItemPosition(this.positions)
      dynamic && dynamic.setPointPosition(index, cartesian)
      this.form.totalLen = getDistance(dynamic.getDistance(this.positions))
      routeData.distance = dynamic.getDistance(this.positions)

      let geoposition = [],
        newpositions = []
      for (let i of this.positionData) {
        const lon = Number(i.longitude)
        const lat = Number(i.latitude)
        const height = Number(i.height)
        var point = [parseFloat(lon), parseFloat(lat), parseFloat(height)]
        geoposition.push(point)
        newpositions.push(Cesium.Cartesian3.fromDegrees(parseFloat(lon), parseFloat(lat), height))
      }
      routeData && (routeData.geojson.geometry.coordinates = geoposition)
      dynamic && dynamic.setAllPointPosition(newpositions)
    },
    //调整总时间
    hoverChange() {
      let times = 0,
        topTime = 0
      for (let i = 0; i < this.positionData.length; i++) {
        const properties = this.positionData[i].properties
        topTime += Number(properties.hoveringtime)
      }

      for (let j = 0; j < this.positionData.length - 1; j++) {
        let data = this.positionData[j]
        let data2 = this.positionData[j + 1]
        const speed = Number(this.positionData[j].properties.speed) === 0 ? 15 : Number(this.positionData[j].properties.speed)
        const cods = Cesium.Cartesian3.fromDegrees(Number(data.longitude), Number(data.latitude), Number(data.height))
        const cods2 = Cesium.Cartesian3.fromDegrees(Number(data2.longitude), Number(data2.latitude), Number(data2.height))
        let distance = dynamic.getDistance([cods, cods2])
        times += Number(distance) / speed
      }
      const totalT = topTime + times
      return getTime(parseInt(totalT))
    },
    normalizeHeading(heading) {
      while (heading < -180) {
        heading += 360
      }
      while (heading > 180) {
        heading -= 360
      }
      return heading
    }
  },
  beforeDestroy() {
    this.close()
    EventBus.$off('changeIsEditPointAtr')
  }
}
</script>
  
<style lang="scss" scoped>
.router-flex {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 5px;
}
.router-flex-1 {
  display: flex;
  align-items: center;
  white-space: nowrap;
  justify-content: center;
  color: #fff;
}
.router-cursor {
  cursor: pointer;
}

.el-drawer__wrapper {
  position: absolute !important;
  width: 480px !important;
  height: 450px !important;
  bottom: 110px !important;
  left: 20px !important;
  top: auto;
}

.drawer-panel {
  width: 480px;
  border: solid #0e60af 1px;
  border-radius: 10px;
  position: absolute;
  bottom: 10px;
  left: 20px;
  z-index: 99;
}

.grid-control {
  position: absolute;
  left: 100px;
  border: solid 1px white;
  border-radius: 10px;
  width: calc(100% - 120px);
  height: 180px;
  top: 10px;
}

.roam {
  padding: 0px;
  color: #fff;
}

.roam-btns {
  display: grid;
  grid-template-columns: auto auto auto auto;
  padding: 10px 0;

  span {
    color: #ffffff;
    background: #008aff80;
    border: none;
    padding: 5px 15px;
    box-shadow: 0 2px #00000004;
    cursor: pointer;
    font-weight: 400;
    white-space: nowrap;
    border-radius: 2px;
    margin: 0 10px;
    text-align: center;
  }

  .beidou {
    background: #11804380;
    /* // width:75% */
  }

  .oriWidth {
    width: 75%;
  }

  .width {
  }

  .nobeidou {
    background: #008aff80;
    /* // width: 75%; */
  }
}

.panel-btns {
  color: #ffffff;
  background: #008aff80;
  border: none;
  padding: 5px 15px;
  box-shadow: 0 2px #00000004;
  font-weight: 400;
  white-space: nowrap;
  border-radius: 2px;
  margin: 0 10px;
  text-align: center;
  cursor: pointer;
}
.panel-btns:hover {
  background: #0e60af;
}

.roam-btns1 {
  width: 50%;
  display: grid;
  grid-template-columns: auto;
  margin-bottom: 5px;

  > span {
    color: #ffffff;
    background: #0b1e30c2;
    border: none;
    padding: 5px 15px;
    box-shadow: 0 2px #00000004;
    cursor: pointer;
    font-weight: 400;
    white-space: nowrap;
    border-radius: 2px;
    margin: 0 10px;
    text-align: center;
  }
}

.roam-form {
  max-height: 262px;
  margin: 10px 0;
}

.roam-form::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}

.el-form-item {
  margin-bottom: 0px;
  border: 1px solid #a2a0a0;
  border-bottom: none;
}
.other-setting-panel {
  width: 300px;
  position: absolute;
  right: 20px;
  bottom: 10px;
  color: #dedede;
  font-size: 15px;
  border: solid #0e60af 2px;
  border-radius: 5px;
}

.otherSetingitem {
  display: grid;
  grid-template-columns: 1fr 2fr;
  margin: 10px;
}
.otherSetingitem-1 {
  display: grid;
  grid-template-columns: 1fr 2fr;
  margin: 10px;
  gap: 10px;
}

.collapse-text {
  display: flex;
  justify-content: space-between;
  margin: 5px 0;
}
.text-disabled {
  width: 120px;
  background: #c2bdbd61;
  border-radius: 2px;
  padding: 0 4px;
  box-sizing: border-box;
  cursor: not-allowed;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.collapse-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 88%;
}

.message-box {
  position: absolute;
  right: 20px;
  top: 10px;
  padding: 5px 5px 10px 5px;
  color: #dedede;
  font-size: 15px;
  border: solid #0e60af 2px;
  border-radius: 3px;
  box-sizing: border-box;
}

::v-deep {
  .el-slider__runway {
    margin: 6px 0;
  }
  .el-collapse {
    border-top: 0px solid #ebeef5;
    border-bottom: 0px solid #ebeef5;
  }
  .el-collapse-item__header {
    display: flex;
    align-items: center;
    height: 28px;
    line-height: 28px;
    background-color: #10576785;
    color: #fff;
    cursor: pointer;
    border: none;
    font-size: 13px;
    font-weight: 500;
    padding: 0 0 0 10px;
  }
  .el-collapse-item__wrap {
    padding: 0 5px;
    will-change: height;
    background-color: #10576738;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 0px solid #fff;
  }
  .el-collapse-item__content {
    padding-bottom: 5px;
    font-size: 13px;
    color: #fff;
    line-height: 1.769230769230769;
  }
}
.table-icon {
  color: #fff;
}
::v-deep {
  .el-input-group__append,
  .el-input-group__prepend {
    background-color: #c2bdbd61;
    color: #fff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 0px solid #43a0f780;
    border-radius: 0 4px 4px 0;
    padding: 0 8px;
    width: 1px;
    white-space: nowrap;
  }
  .el-dialog {
    width: 20%;
    background: #ffffff00;
  }

  .el-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: black;
  }

  .el-dialog__headerbtn {
    position: static;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 16px;
  }

  .el-dialog__title {
    color: #dedede;
  }

  .el-dialog__body {
    padding: 20px;
    background-color: rgb(0, 0, 0, 0.8);
  }
}

::v-deep .el-drawer {
  width: 100% !important;
  height: 100% !important;
  background: #0b1e30d7 !important;
  border: solid #0e60af 2px !important;
  border-radius: 10px !important;
}

::v-deep {
  .el-input__inner {
    background-color: rgba(255, 255, 255, 0);
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    // height: 30px;
    // line-height: 30px;
    outline: 0;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
  }

  .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #fff;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
  }

  .el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    margin-right: 0px;
  }

  .el-progress {
    margin-top: 2px;
    width: 100%;
    position: relative;
    line-height: -1;
  }

  .el-progress-bar {
    padding-right: 50px;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    margin-right: -46px;
    box-sizing: border-box;
  }

  .el-progress__text {
    font-size: 14px;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0px;
    line-height: 1;
  }

  .el-table,
  .el-table__expanded-cell {
    background-color: rgba(10, 23, 32, 0.3);
  }
  .el-table th.el-table__cell {
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #ffffff00;
  }
  .el-table tr {
    background-color: rgba(10, 23, 32, 0.4);
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: #22ee222e;
  }
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
  }

  .el-table colgroup col[name='gutter'] {
    width: 6px !important;
  }
  .el-table__body {
    width: 100% !important;
  }
  .el-table__body tr.hover-row > td.el-table__cell {
    background-color: rgba(15, 48, 71, 0.8);
  }

  .el-table th {
    background-color: rgba(15, 48, 71, 0.8);
  }

  .el-table__body tr.hover-row > td {
    background-color: rgba(49, 54, 58, 0.8);
  }

  .current-row {
    background-color: rgb(103 194 58 / 20%) !important;
  }
  .el-table__body tr.current-row > td {
    background-color: rgba(236, 245, 255, 0);
  }
  .el-table colgroup col[name='gutter'] {
    width: 11px;
  }
  .el-table__body {
    width: 100% !important;
  }

  .el-input-number__decrease {
    left: 1px;
    border-radius: 4px 0 0 4px;
    border-right: 1px solid rgba(67, 160, 247, 0.5);
  }
  .el-input-number__increase {
    right: 1px;
    border-radius: 0 4px 4px 0;
    border-left: 1px solid rgba(67, 160, 247, 0.5);
  }
}
</style>